<template>
  <div class="video" :style="blockStyle">
    <div class="video-container" :style="borderRadius" v-bind:class="'ratio-' + data.type">
      <video ref="myVideo" class="video-div" v-if="data.url" :src="data.url"></video>
      <div class="video-div"></div>
      <div class="modal" @click="operateVideo" v-if="videoState">
        <vimage v-if="data.bg" :src="data.bg"></vimage>
        <i class="iconfont el-sc-bofang_huaban"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoState: true
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    blockStyle() {
      let s = 'padding:' + this.data.margin.top + 'px ' + this.data.margin.lr / 2 + 'px ' + this.data.margin.bottom + 'px;';
      // s += 'border-radius:' + this.data.radius.template_radius + 'px;';

      return s;
    },
    borderRadius() {
      let s = 'border-radius:' + this.data.radius.top / 2 + 'px ' + this.data.radius.top / 2 + 'px ' + this.data.radius.bottom / 2 + 'px ' + this.data.radius.bottom / 2 + 'px ';
      return s;
    },
    videoHeight() {
      switch (this.data.type) {
        case 1:
          return 210;
          break;
        case 2:
          return 375;
          break;
        case 3:
          return 281;
          break;
      }
    }
  },
  methods: {
    operateVideo() {
      if (!this.data.url) {
        // this.$message({ message: "暂无视频资源，请查看其他视频！" });
        return false;
      }
      this.videoState = false;
      this.$refs.myVideo.play();
      this.$refs.myVideo.addEventListener('ended', () => {
        this.videoState = true;
      });
    }
  }
};
</script>

<style lang="scss">
.video-container {
  overflow: hidden;
  position: relative;
  &.ratio-1 {
    height: 191px;
  }
  &.ratio-2 {
    height: 351px;
  }
  &.ratio-3 {
    height: 263px;
  }
  .video-div {
    width: 100%;
    height: 100%;
  }
  .modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);

    display: flex;

    flex-direction: column;
    z-index: 10;
    .iconfont {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 72px;
      width: 72px;
      height: 72px;
      text-align: center;
      line-height: 72px;
      color: #fff;
      opacity: 0.8;
    }
  }
}
</style>
